<<template>
  <div>
    <div class="filter-bar-query">
      <h2>新建通道</h2>
    </div>
    <el-row type="flex" justify="center" class="create-index-content">
      <el-col :span="18">
        <el-row type="flex" class="create-input-row">
          <el-col>
            <span class="create-index-label">通道名称</span>
            <el-input v-model="name" size="small" class="create-index-input" placeholder="请输入通道名称"></el-input>
          </el-col>
        </el-row>
        <el-row type="flex" class="create-input-row">
          <el-col>
            <span class="create-index-label">通道类型</span>
            <el-select v-model="channelType" class="create-index-input" size="small" placeholder="请选择通道类型">
              <el-option
                v-for="item in channelTypeData"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row type="flex" class="create-input-row ">
          <el-col>
            <span class="create-index-label create-label-description">服务器</span>
            <el-input v-model="name" type="textarea" size="small" class="create-index-input" placeholder="请输入服务器"></el-input>
          </el-col>
        </el-row>
        <el-row type="flex" class="create-input-row">
          <el-col class="api-args">
           接口参数
          </el-col>
        </el-row>
        <el-row type="flex" class="create-input-row">
          <el-col>
            <el-table :data="apiData">
              <el-table-column prop="fieldName" label="名称">
                <template scope="scope">
                  <el-input v-model="scope.row.apiName" size="small" placeholder="请输入名称"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="fieldCode" label="说明">
                <template scope="scope">
                  <el-input v-model="scope.row.explain" size="small" placeholder="请输入说明"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="fieldDescription" label="值">
                <template scope="scope">
                  <el-input v-model="scope.row.value" size="small" placeholder="请输入值"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="description" label="操作">
                <template scope="scope">
                  <el-button type="text" size="small" v-show="scope.row.add" @click="addApi(scope.row)">添加</el-button>
                  <el-button type="text" :class="{'del-button-common': !scope.row.add}" size="small" v-show="!scope.row.add" @click="delApi(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row type="flex" class="create-input-row">
          <el-col class="api-args">
           服务级别（SLA）
          </el-col>
        </el-row>
        <el-row type="flex" class="create-input-row">
          <el-col>
            <el-table :data="slaData">
              <el-table-column prop="level" label="级别">
                <template scope="scope">
                  <el-input v-model="scope.row.level" size="small" placeholder="请输入级别"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="description" label="描述">
                <template scope="scope">
                  <el-input v-model="scope.row.description" size="small" placeholder="请输入描述"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="resTime" label="响应时间">
                <template scope="scope">
                  <el-input v-model="scope.row.resTime" size="small" placeholder="请输入响应时间"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="resolveTime" label="解决时间">
                <template scope="scope">
                  <el-input v-model="scope.row.resolveTime" size="small" placeholder="请输入解决时间"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="description" label="操作">
                <template scope="scope">
                  <el-button type="text" size="small" v-show="scope.row.add" @click="addSla(scope.row)">添加</el-button>
                  <el-button type="text" :class="{'del-button-common': !scope.row.add}" size="small" v-show="!scope.row.add" @click="delSla(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center" class="create-bottom-active">
          <el-button size="small" type="primary" @click="createChannel">创建</el-button>
          <el-button size="small" @click="channelCannel">取消</el-button>
        </el-row>
      </el-col>
    </el-row>
    <el-dialog
      title="提示"
      :visible.sync="delApiVisible"
      size="tiny">
      <span>是否要删除当前接口参数</span>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="delApiVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="confrimApiDel">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="delSlaVisible"
      size="tiny">
      <span>是否要删除当前SLA信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="delSlaVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="confrimSlaDel">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import { Row, Col, Button, Table, TableColumn, Input, Select, Option, Popover, Message, Dialog } from 'element-ui'
  export default {
    methods: {
      addSla (obj) {
        var _check = this._checkEmptySla(obj)
        if (_check) return
        this._pushschannelTypeData()
        obj.add = false
      },
      delSla (index) {
        this.delSlaVisible = true
        this.sourceIndex = index
      },
      confrimSlaDel () {
        this.delSlaVisible = false
        this.slaData.splice(this.sourceIndex, 1)
      },
      confrimApiDel () {
        this.delApiVisible = false
        this.apiData.splice(this.systemIndex, 1)
      },
      createChannel () {
        this.$router.push('/settings/channel')
      },
      channelCannel () {
        this.$router.push('/settings/channel')
      },
      delApi (index) {
        this.delApiVisible = true
        this.systemIndex = index
      },
      addApi (obj) {
        var _check = this._checkEmptyApi(obj)
        if (_check) return
        this._pushapiData()
        obj.add = false
      },
      _checkEmptyApi (obj) {
        var flag = false
        for (let i in obj) {
          if (obj[i] === '') {
            Message('名称， 说明，值不能为空')
            flag = true
          }
        }
        return flag
      },
      _checkEmptySla (obj) {
        var flag = false
        for (let i in obj) {
          if (i === 'description') {
            continue
          }
          if (obj[i] === '') {
            Message('级别， 响应时间，解决时间不能为空')
            flag = true
          }
        }
        return flag
      },
      _pushapiData () {
        this.apiData.push(
          {
            apiName: '',
            explain: '',
            value: '',
            add: true
          }
        )
      },
      _pushschannelTypeData () {
        this.slaData.push(
          {
            level: '',
            description: '',
            resTime: '',
            add: true
          }
        )
      }
    },
    data () {
      return {
        apiData: [
          {
            apiName: '',
            explain: '',
            value: '',
            add: true
          }
        ],
        systemIndex: '',
        sourceIndex: '',
        delApiVisible: false,
        delSlaVisible: false,
        expression: '',
        fieldName: '',
        fieldCode: '',
        fieldDescription: '',
        slaData: [
          {
            level: '',
            description: '',
            resTime: '',
            resolveTime: '',
            add: true
          }
        ],
        name: '',
        channelType: '',
        channelTypeData: [
          {
            label: 'APM',
            value: 'APM'
          }
        ],
        thresholdData: [
          {
            label: '秒',
            value: 'ms'
          },
          {
            label: '分钟',
            value: 'min'
          },
          {
            label: '小时',
            value: 'hour'
          },
          {
            label: '%',
            value: '%'
          }
        ],
        thresholdValue: ''
      }
    },
    components: {
      'el-row': Row,
      'el-col': Col,
      'el-table': Table,
      'el-button': Button,
      'el-table-column': TableColumn,
      'el-input': Input,
      'el-select': Select,
      'el-option': Option,
      'el-popover': Popover,
      'el-dialog': Dialog
    }
  }
</script>
<style lang="scss" scoped>
  .filter-bar-query {
    height: 40px;
    padding: 0 10px;
    line-height: 30px;
    border-bottom: 1px solid #e5e5e5;
    h2 {
      font-weight: normal;
    }
  }
  .create-index-content {
    margin-top: 40px;
  }
  .create-index-input {
    width: 70%;
  }
  .create-index-label {
    display: inline-block;
    width: 60px;
    text-align: right;
    margin-right: 15px;
  }
  .create-input-row {
    margin-bottom: 15px;
  }
  .create-label-description {
    position: relative;
    float: left;
    margin-right: 18px;
  }
  .create-input-threshold {
    width: 30%;
  }
  .creare-threshold-unit {
    width: 15%;
  }
  .create-threshold-test {
    margin: 0 15px;
  }
  .create-field-content {
    width: 75.5%;
  }
  .create-bottom-active {
    margin-top: 30px;
  }
  .del-button-common {
    margin-left: 0!important;
  }
  .api-args {
    padding: 15px 0 0;
    border-top: 1px solid #e5e5e5;
    font-size: 16px;
  }
</style>